<template>
  <div>
    <a-spin :spinning="spinning">
      <div style="margin:50px auto;">
        <a-row>
          <a-col class="formGroupTitle"><span style="color:black">交易手续费：</span></a-col>
        </a-row>
        <div style="height: 60vh;overflow-y:auto;">
          <table>
            <tr v-for="li in list" :key="li.id">
              <td><span style="color: #52506b;">{{li.transName}}</span></td>
              <td>
                <div v-if="li.feeTemplate.type=='rate_cd'">
                  <span v-if="li.feeTemplate.rate!=null">
                    <span v-if="li.feeTemplate.rate.c != null">
                      贷记卡：
                      {{ li.feeTemplate.rate.c |feefilter}}
                    </span>
                    <span v-if="li.feeTemplate.rate.d != null">
                      借记卡：
                      {{li.feeTemplate.rate.d |feefilter}}
                    </span>
                    <span v-if="li.feeTemplate.amount!=null">单笔:
                      <span>{{ li.feeTemplate.amount | amountfilter }} 元</span>
                    </span>
                  </span>
                </div>
                <div v-if="li.feeTemplate.type=='d0'">
                  <span>费率:</span>
                  <span v-if="li.feeTemplate.rate!=null">
                    {{ li.feeTemplate.rate | feefilter}}
                  </span>
                  <span v-if="li.feeTemplate.settle_percent!=null">
                    清算比例:
                    <span>{{ li.feeTemplate.settle_percent | clearfilter}} </span>
                  </span>
                </div>
                <div v-if="li.feeTemplate.type=='rate'">
                  <span v-if="li.feeTemplate.rate !=null">
                    <span>结算：</span>
                    <span>{{ li.feeTemplate.rate | clearfilter}}</span>
                  </span>
                  <span v-if="li.feeTemplate.amount !=null">
                    <span>单笔：</span>
                    <span>{{ li.feeTemplate.amount | amountfilter}}元</span>
                  </span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </a-spin>
    <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="gologin">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";

  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import api from "@/common/api";
  const ATabPane = ATabs.TabPane;

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      ATabPane,
      ATabs,
      AForm
    },
    filters: {
      feefilter(value) {//费率过滤器
        return Math.round(value * 1000000) / 10000 + "%"
      },
      amountfilter(value) {//单笔金额过滤器
        return (value / 100)
      },
      clearfilter(value) {//清算比例过滤器
        return (value * 100) + "%"
      },
    },
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        error: "",
        loginpwd: '',
        loginpwd2: '',
        login: false,
        spinning: false,
        list: {},
        query: {},
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 7 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 10 }
          }
        }
      };
    },
    watch: {},
    computed: {},
    mounted() {
      this.spinning = true;
      this.handleSearch()
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      handleSearch() {
        api.coustromRateOrg(this.query, res => {
          console.info(res)
          if (res.code == "OK") {
            this.list = res.list
            for (var idx in this.list) {
              this.list[idx].feeTemplate = JSON.parse(this.list[idx].feeTemplate);
            }
            this.spinning = false;
          }else{
            this.$message.info("暂无数据")
            this.spinning = false;
          }
        })
      },
      gologin() {
        this.visible = false;
        this.$router.push("/home");
      },
    }
  };
</script>

<style scoped>
 table span {
    /* cursor: pointer; */
    margin-left: 30px;
    color: #98989e;
  }

  .formGroupTitle {
    font-size: 16px;
    font-weight: 600;
    width: 80%;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 20px;
  }

  .ant-tabs-nav {
    float: right;
  }

  .content4 {
    display: flex;
    margin-bottom: 20px;
  }

  .content4 .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }

  .content4 .conright {
    padding: 0 20px;

  }

  .content4 .conright span {
    margin-right: 20px;
  }

  tr {
    text-align: left;
    font-size: 16px;
    height: 40px;
  }

  table {
    margin: 0 auto;
    width: 80%
  }

  table td {
    border: 1px solid #b7b7b7
  }

  table tr:nth-child(even) {
    background: #F7F9FC;
  }
</style>